import React from 'react';
import {
  View,
  Text,
  TouchableOpacity,
} from 'react-native';


import Constants from '../../common/Constants';
import Config from '../../config';
import {DateUtils} from '../../utils/Utils';
import TImage from '../../components/TImage';
import SizeUtils from '../../common/SizeUtils';
import BaseItem from '../common/BaseItem';
import CommonAvatarView from '../common/CommonAvatarView';

export default class CommonChatItemView extends BaseItem {
    constructor(props) {
      super(props);

      this.state.visible = true;
      this.state.delayFinish = true;
    }

    componentDidMount() {
      // let timer = setTimeout(()=>{
      //  clearTimeout(timer);
      //  this.setState({
      //    delayFinish:true,
      //  });
      // }, 500);
    }

    shouldComponentUpdate(nextProps, nextState) {
      return nextState.visible != this.state.visible ||
        nextState.delayFinish != this.state.delayFinish ||
        nextProps.data.msg_id != this.props.data.msg_id;
    }

    setVisible(visible) {
      this.setState({
        visible:visible,
      })
    }

    render() {
      return (
        <View style={{width:SizeUtils.getWindowSize().width,
            paddingLeft:SizeUtils.translateDesignWidthToCode(40),
            paddingRight:SizeUtils.translateDesignWidthToCode(40),
            overflow:'hidden',
            backgroundColor:"#ffffff"}}>
            {this._renderView()}
        </View>
      )
    }

    _renderView() {
      if(this._checkIsSelf()) {
        return this._renderSelfView();
      }
      else {
        return this._renderOtherView();
      }
    }

    _checkIsSelf() {
      return this._getUserData() && this.props.data.sender_id == this._getUserData().user_id;
    }

    _renderSelfView() {
      return (
        <View style={{flexDirection:"row", justifyContent:"flex-end",
            width:SizeUtils.getWindowSize().width - SizeUtils.translateDesignWidthToCode(80),
            paddingBottom:SizeUtils.translateDesignHeightToCode(20),
          }}>
          {this._renderTime()}
          <View style={{marginTop: SizeUtils.translateDesignHeightToCode(15),
              marginRight:SizeUtils.translateDesignWidthToCode(20),
              maxWidth:SizeUtils.getWindowSize().width - SizeUtils.translateDesignWidthToCode(200),}}>
              <View style={{
                backgroundColor: "#D93338",
                maxWidth:SizeUtils.getWindowSize().width - SizeUtils.translateDesignWidthToCode(250),
                paddingTop:SizeUtils.translateDesignHeightToCode(26),
                paddingLeft:SizeUtils.translateDesignWidthToCode(22),
                paddingBottom:SizeUtils.translateDesignHeightToCode(20),
                paddingRight:SizeUtils.translateDesignWidthToCode(20),
                borderRadius:SizeUtils.translateDesignNumToCode(10),
                justifyContent: 'center',
              }}>
                {this._renderContent()}
              </View>
          </View>
          {this._renderSelfAvatar()}
        </View>
      )
    }

    _renderSelfAvatar() {
      if(this.state.visible === false || this.state.delayFinish === false) {
        return <CommonAvatarView avatarUri={""} size={90}/>;
      }
      return <CommonAvatarView avatarUri={this._getSelfAvarta()} size={90}/>;
    }

    _getSelfAvarta() {
      return this.props.selfData.avatar_url;
    }

    _getOtherAvarta() {
      return this._getUserData().avatar_url;
    }

    _getUserData() {
      return this.props.userData;
    }

    _renderOtherView() {
      return (
        <View style={{flexDirection:"row",
            paddingBottom:SizeUtils.translateDesignHeightToCode(20),
            paddingRight:SizeUtils.translateDesignWidthToCode(20),
          }}>
          {this._renderOtherAvatar()}
          <View style={{marginTop: SizeUtils.translateDesignHeightToCode(15),
              marginLeft:SizeUtils.translateDesignWidthToCode(20),
              maxWidth:SizeUtils.getWindowSize().width - SizeUtils.translateDesignWidthToCode(200),}}>
             <View style={{
               backgroundColor: "#ffffff",
               maxWidth:SizeUtils.getWindowSize().width - SizeUtils.translateDesignWidthToCode(250),
               paddingTop:SizeUtils.translateDesignHeightToCode(26),
               paddingLeft:SizeUtils.translateDesignWidthToCode(20),
               paddingBottom:SizeUtils.translateDesignHeightToCode(20),
               paddingRight:SizeUtils.translateDesignWidthToCode(26),
               borderRadius:SizeUtils.translateDesignNumToCode(10),
               borderColor: '#cccccc',
               borderWidth: SizeUtils.translateDesignNumToCode(3),
               justifyContent: 'center',
             }}>
               {this._renderContent()}
             </View>
           </View>
         {this._renderTime()}
        </View>
      )
    }

    _renderOtherAvatar() {
      return (
        <View style={{width:SizeUtils.translateDesignWidthToCode(90)}}>
          <CommonAvatarView avatarUri={this._getOtherAvarta()} size={90}/>
          <Text style={{width:SizeUtils.translateDesignWidthToCode(90),
              paddingTop:SizeUtils.translateDesignHeightToCode(6),
              color:"#333333", fontSize:SizeUtils.translateFontSizeToCode(24),
              textAlign:"center",
            }} numberOfLine={1} >
            {this._getUserData().nick}
          </Text>
        </View>
      )
    }

    _renderContent() {
      return (
        <Text style={{
            color: this._checkIsSelf() ? "#ffffff" : "#666666",
            fontSize: SizeUtils.translateFontSizeToCode(24),
            lineHeight:SizeUtils.translateFontSizeToCode(34),
          }}>{this.props.data.content.replace(/\n$/g, '')}
        </Text>
      )
    }

    _renderTime() {
      return (
        <View style={{paddingTop:SizeUtils.translateDesignHeightToCode(40),
            paddingLeft:SizeUtils.translateDesignWidthToCode(20),
            paddingRight:SizeUtils.translateDesignWidthToCode(20),}}>
          <Text style={{color:"#999999", fontSize:SizeUtils.translateFontSizeToCode(24)}}>
            {DateUtils.formatDateMnD(this.props.data.sent_at)}
          </Text>
        </View>
      )
    }
}
